<template>
  <el-form label-width="100px">
    <v-form-title title="票据图片"/>
    <el-form-item label="票据正面">
      <div class="img-box">
        <img @click="priviewImage(bill.billFrontView)" :src="bill.billFrontView" alt="">
      </div>
    </el-form-item>
    <el-form-item label="票据背面">
      <div class="img-box">
        <img @click="priviewImage(bill.billEndorsementOne)" :src="bill.billEndorsementOne" alt="">
        <img @click="priviewImage(bill.billEndorsementTwo)" :src="bill.billEndorsementTwo" alt="">
        <img @click="priviewImage(bill.billEndorsementThree)" :src="bill.billEndorsementThree" alt="">
      </div>
    </el-form-item>
    <v-form-title title="票面信息"/>
    <el-form-item label="票据号">{{bill.acceptorLineNumber}}</el-form-item>
    <el-form-item label="票面金额">{{bill.faceValue}}</el-form-item>
    <el-form-item label="到期日">{{bill.expiryDate}}</el-form-item>
    <el-form-item label="承兑人">{{bill.acceptor}}</el-form-item>
    <el-form-item label="承兑人行号">{{bill.acceptorLineNumber}}</el-form-item>
    <el-form-item label="瑕疵情况">{{bill.billFlawNames}}</el-form-item>
    <v-form-title title="票面信息"/>
    <el-form-item label="竞价方式">{{bill.biddingMethodName}}</el-form-item>
    <el-form-item label="发布期限">{{bill.releaseDeadline}}天</el-form-item>
    <el-form-item label="创建时间">{{bill.createTime}}</el-form-item>
    <slot></slot>
  </el-form>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'
  import vFormTitle from '@/components/form-title'

  @Component({
    components: {
      vFormTitle
    }
  })
  export default class BillDetail extends Vue {
    @Prop({
      default: () => {}
    }) bill

    priviewImage (src) {
      window.open(src)
    }
  }
</script>

<style scoped lang="less">
  .img-box {
    flex-direction: column;
    img {
      width: 100px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
</style>
